<template>
    <div class="combo">
        <h3 class="my-combo">{{hasCombo || '您还没有购买套餐哦'}}</h3>
        <div class="tab">
            <el-radio-group v-model="type">
                <el-radio-button :label="1">包月</el-radio-button>
                <el-radio-button :label="2">包季度</el-radio-button>
                <el-radio-button :label="3">包年</el-radio-button>
            </el-radio-group>
        </div>
        <div class="tab-type">
            <div class="combo-item" v-show="item.type == type" v-for="(item, index) in list" :key="index">
                <div class="plan-header">
                    <div class="title">{{item.name}}</div>
                    <p>
                        <em>{{item.sweet}}</em> 糖果/{{unit[item.type]}}
                    </p>
                </div>
                <div class="features" style="white-space: pre-line;line-height: 30px;">
                    {{item.desc}}
                </div>
                <div class="actions">
                    <el-button class="btn" v-if="item.status != 3" type="primary" @click="buyCombo(item)" >{{btnText[item.status]}}</el-button>
                    <el-button v-else type="info" disabled>{{btnText[item.status]}}</el-button>
                    <p class="tip" v-if="item.status == 0">消耗{{item.sweet}}糖果 | 时长{{time[item.type]}}天</p>
                    <p class="tip" v-if="item.status == 1">消耗{{item.sweet}}糖果 | 续期{{time[item.type]}}天</p>
                    <p class="tip" v-if="item.status == 2">
                        {{item.difSweet >= 0 ? '补差价' : '退回'}}{{item.difSweet >= 0 ? item.difSweet : Math.abs(item.difSweet)}}糖果 | 升级套餐
                    </p>
                </div>
            </div>
        </div>
        <el-dialog
            title="订单确认"
            :visible.sync="dialogVisible"
            width="40%"
            :before-close="handleClose">
            <el-form label-width="180px">
                <el-form-item label="套餐：">{{curItem.name}}</el-form-item>
                <el-form-item label="开放商品位数量：">{{curItem.businessNum}}个</el-form-item>
                <el-form-item label="时长：">+{{time[curItem.type]}}天</el-form-item>
                <el-form-item label="续期至：">{{curItem.renewalTime}}</el-form-item>
                <el-form-item label="价格：">{{curItem.sweet}}&nbsp;糖果</el-form-item>
                <el-form-item :label="curItem.difSweet >= 0 ? '糖果抵扣：' : '退还糖果：'" v-if="curItem.status == 2">
                    <span v-if="curItem.difSweet >= 0">{{curItem.difSweet}}</span>
                    <span v-if="curItem.difSweet < 0">{{Math.abs(curItem.difSweet)}}</span>
                    &nbsp;糖果
                </el-form-item>
                <el-form-item v-else label="糖果抵扣：">
                    <span>{{curItem.sweet}}</span>
                </el-form-item>
                <el-form-item label="交易密码：">
                    <div style="width: 150px">
                        <el-input size="small" v-model="password" type="password"></el-input>
                    </div>
                </el-form-item>
                <el-form-item label="购买须知：">
                    <div style="white-space: pre-line;">{{curItem.notes}}</div></el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data () {
        return {
            mid: localStorage.getItem('merchantId'),
            type: 1,
            list: [],
            btnText: {
                0: '立即购买',
                1: '续期',
                2: '升级',
                3: '立即购买'
            },
            unit: {
                1: '月',
                2: '季度',
                3: '年'
            },
            time: {
                1: '30',
                2: '90',
                3: '365'
            },
            dialogVisible: false,
            curItem: {},
            password: '',
            hasCombo: ''
        }
    },
    mounted() {
        this.combAvailable()
        this.getCombo()
    },
    methods: {
        combAvailable() {
            this.$http.get(this.$api.combAvailable, {
                mid: this.mid
            }).then((res) => {
                if (res.code == 0) {
                    this.hasCombo = res.data
                }
            });
        },
        getCombo() {
            this.$http.get(this.$api.combo, {
                mid: this.mid
            }).then((res) => {
                if (res.code == 0) {
                    this.list = res.data
                    // .map(item => {
                    //     item.desc = item.desc.replace(/(\r\n)|(\n)/g,'<br>')
                    //     return item
                    // });
                }
            });
        },
        buyCombo(item) {
            this.curItem = item;
            this.dialogVisible = true;
        },
        handleClose()  {
            this.curItem = {};
            this.password = ''
            this.dialogVisible = false;
        },
        submit() {
            let api_url = '';
            switch (this.curItem.status) {
                case 0:
                    api_url = this.$api.combBuy
                    break;
                case 1:
                    api_url = this.$api.combRenewal
                    break;
                case 2:
                    api_url = this.$api.combUpgrade
                    break;
                default:
                    break;
            }
            let params = {
                mcId: this.curItem.id,
                mid: this.mid,
                password: this.password
            }
            this.$http.post(api_url, params).then((res) => {
                if (res.code == 0) {
                    this.$message('操作成功');
                    this.combAvailable()
                    this.getCombo()
                    this.dialogVisible = false;
                } else {
                    this.$message.error('操作失败,' + res.msg);
                }
            });
        }
    }
}
</script>
<style scoped>
.combo .tab {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 30px;
}
.combo .tab-type {
    display: flex;
}
.combo .combo-item{
    position: relative;
    overflow: hidden;
    flex: 1;
    max-width: 300px;
    margin: 10px auto;
    text-align: center;
    border: 1px solid #cdcdcd;
    border-radius: 3px;
    background-color: white;
    border-radius: 5px;
}
.combo-item .plan-header {
    padding: 2.2rem 1.2rem;
    background-repeat: no-repeat;
    background-size: cover;
    color: #fff;
    /* background-color: #f9fcff; */
}
.combo-item:nth-child(3n+1) .plan-header {
    background-image: url('../../assets/valueAddedServices/bg1.jpg');
}
.combo-item:nth-child(3n+2) .plan-header {
    background-image: url('../../assets/valueAddedServices/bg2.jpg');
}
.combo-item:nth-child(3n+0) .plan-header {
    background-image: url('../../assets/valueAddedServices/bg3.jpg');
}
.combo-item .plan-header em{
    margin: 0 4px;
    font-size: 24px;
    font-weight: normal;
    font-style: normal;
}
.combo-item .title {
    margin-bottom: 10px;
    font-size: 1.29rem;
}
.combo-item .features{
    padding: 38px 10px 0;;
    height: 180px;
    font-size: 15px;
}
.combo-item .actions {
    height: 100px;
    padding: 30px 40px 0;
    border-top: 1px dashed #e7e7e7;
}
.combo-item .actions .el-button{
    padding: 12px 40px;
    border-radius: 10px;
}
.combo-item:nth-child(3n+1) .actions .btn {
    background-color: #888bf1;
    border-color: #888bf1;
}
.combo-item:nth-child(3n+2) .actions .btn {
    background-color: #ffac26;
    border-color: #ffac26;
}
.combo-item:nth-child(3n+0) .actions .btn {
    background-color: #ff8b6a;
    border-color: #ff8b6a;
}
.combo-item .tip {
    margin-top: 13px;
    color: #868e96;
    font-size: 13px;
}
.my-combo {
    text-align: center;
    margin-top: 30px;
}
</style>